<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/basic.css">
    <style>
        .container {
            width: 50%;
            height: 20vh;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 30px auto;
            color: white;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <input type="text">
    <div class="container" index=0>当前移动:</div>
    <div class="container" index=1>当前移动:</div>
    <div class="container" index=2>当前移动:</div>

</body>

<script>
    // document.querySelector('.container').onclick = () => {
    //     alert('测试')
    // }
    // document.querySelectorAll('.container').forEach(item =>
    //     item.onclick = () => {
    //         alert("测试")
    //     }
    // )

    // document.querySelectorAll('.container').forEach((dom, index) => {
    //     // if (index == 0) {
    //         dom.addEventListener('mouseenter', () => {
    //             console.log(index)
    //         })
    //     // }
    // })
    document.querySelectorAll('.container').forEach(dom => {
        let count1 = 0
        let count2 = 0
        let count3 = 0
        dom.addEventListener("mousemove", () => {
            if (dom.getAttribute('index') == 0) {
                count1++
                dom.innerText = `当前移动:${count1}`
            } else if (dom.getAttribute('index') == 1) {

            }
        })
    })

    document.querySelector('input').addEventListener('change', () => {
        alert(123)
    })
    document.querySelector('input').addEventListener('keydown', (event) => {
        if (event.keyCode == 13) {
            alert(123)
        }

    })

</script>

</html>